<template>
	<uni-transition mode-class="fade" :duration="200" :show="true">
		<view class="tab-bar">
			<view v-for="(item,index) in list" :key="index" class="tab-bar-item" @tap="switchTab(item,index)" :data-index='index'>
				<view class="center_part">
					<view class="center_part_code" v-if="index == 2">
						<image class=" center-has-noimg" :src="centerImg"></image>
					</view>
					<image v-else class="center-has-image" :src="selectedIndex === index ? item.selectedIconPath : item.iconPath"></image>
				</view>
				<view :style="{color: selectedIndex === index ? selectedColor : color}" class="cover-text">
					{{item.text}}
				</view>
				<view class="number" v-if="item.number != ''">{{item.number}}</view>
			</view>
		</view>
	</uni-transition>
</template>
 
<script>
export default {
	data() {
		return {
			selectedIndex: uni.getStorageSync('selectedIndex') || 0,
			color: "#7A7E83",
			selectedColor: "#232773",
			list: [
			  {
				pagePath: "/pages/home/home",
				text: "首页",
				iconPath: "/static/tab/home-gray.png",
				selectedIconPath: "/static/tab/home-cur.png",
				number: "",
			  },      
			  {
				pagePath: "/pages/company/company",
				text: "装修",
				iconPath: "/static/tab/dpzx.png",
				selectedIconPath: "/static/tab/dpzx-cur.png",
				number: "",
			  },
			  {
				pagePath: "/pages/xqlist/xqlist",
				text: "发布",
				iconPath: "/static/tab/fabu.png",
				selectedIconPath: "/static/tab/fabu.png",
				number: "",
			  },
			  {
				pagePath: "/pages/chat/chat",
				text: "消息",
				iconPath: "/static/tab/chat.png",
				selectedIconPath: "/static/tab/chat.png",
				number: "",
			  },
		
			  {
				pagePath: "/pages/user/user",
				text: "我的",
				iconPath: "/static/tab/user-gray.png",
				selectedIconPath: "/static/tab/user-cur.png",
				number: "",
			  },
			],
			centerImg: "/static/tab/fabu.png",
		};
	},
	methods: {
		switchTab(item, index) {
			let url = item.pagePath
			uni.switchTab({url:item.pagePath})
			this.list.forEach((v, i) => {
				if (item.pagePath === v.pagePath) {
					uni.setStorageSync('selectedIndex', index);
				}
			})
		}
	}
};
</script>
 
<style lang="scss">
.tab-bar {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  /* height: 170rpx; */
  display: flex;
  padding-bottom: env(safe-area-inset-bottom);
  z-index: 99;
  padding: 35rpx 0;
  background: url("https://shop.keju123.com/img/wKgKymLgpdWARzR-AAANbZWJ5GM302.png")
    no-repeat;
  background-size: 100vw auto;
  background-color: #fff;
}

.tab-bar-item {
  flex: 1;
  text-align: center;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}
.tab-bar-item cover-image {
  width: 27px;
  height: 27px;
}

.tab-bar-item .cover-text {
  font-size: 10px;
}
.txt {
  color: #aaaaaa;
}
.fontWeight {
  font-weight: bold;
}
.bg_rec {
  background: #ffd324;
  width: 80rpx;
  min-height: auto;
  height: 20rpx;
  margin-top: -28rpx;
  vertical-align: text-bottom;
  border-radius: 0;
  z-index: -10;
}
.center_img {
  width: 100rpx;
  height: 100rpx;
  transform: translate(-50%);
  left: 50%;
  bottom: 0;
}
.center-has-noimg {
  width: 40rpx;
  height: 40rpx;
  margin-left: -10rpx;
}
.center-has-image {
  width: 38rpx;
  height: 38rpx;
}

.center_part_code {
  padding: 15rpx;
  box-shadow: 0 0 0 #000;
  /* width: 100rpx;
    height: 100rpx; */
  position: absolute;
  top: -22px;
  z-index: 10;
  width: 90rpx;
  height: 90rpx;
  transform: translate(-50%);
  left: 50%;
  box-sizing: border-box;
  border-radius: 50%;
  background-color: #fbbd08;
  display: flex;
    justify-content: center;
    align-items: center;
}
.tab-bar-item:nth-child(3) > .cover-text {
  position: absolute;
  // bottom: 4rpx;
  bottom: calc(-34rpx + env(safe-area-inset-bottom));
}
.number {
  position: absolute;
  font-size: 24rpx;
  min-width: 40rpx;
  min-height: 40rpx;
  display: flex;
  justify-content: center;
  align-items: center;
  color: #fff;
  padding: 4rpx;
  line-height: 24rpx;
  background-color: #fd6334;
  border-radius: 50%;
  transform: translate(26rpx, -40rpx);
}

.safeArea {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: calc(6rpx + env(safe-area-inset-bottom-));
  background-color: #fff;
}


</style>